<template lang="">
  <div>
    <div class="two_my_bidding">
      <div class="two_my_bidding_title">
        <span style="font-size: 20px;color: grey;margin-left: 10px;">我的委托</span>
      </div>
      <div class="two_my_bidding_content">
      <template>
        <el-table
          :data="tableData"
          border
          :header-cell-style="{'text-align':'center',background:'#F2F2F2'}"
          :cell-style="{'text-align':'center'}"
          style="width: 96%;border: 1px solid black;">
          <el-table-column
            prop="date"
            label="委托编号"
            width="300">
          </el-table-column>
          <el-table-column
            prop="name"
            label="委托名称"
            width="200">
          </el-table-column>
          <el-table-column
            prop="province"
            label="委托内容"
            width="300">
          </el-table-column>
          <el-table-column
            prop="city"
            label="委托时间"
            width="254">
          </el-table-column>
          <el-table-column
            prop="address"
            label="服务顾问"
            width="300">
          </el-table-column>
          <el-table-column
            prop="zip"
            label="委托状态"
            width="100">
          </el-table-column>
          <el-table-column
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button v-show="a" @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
              <el-button v-show="b" @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
              <el-button v-show="b" @click="report(scope.row)" type="text" size="small">报告</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" style="margin-top: 20px;float: left;">
      </el-pagination>
      <el-dialog
        title="竞拍报告"
        width="58%"
        :visible.sync="innerVisible"
        append-to-body>
        <div style="width: 100%;">
          <p>
            1.本轮竞拍公告时间:<span style="color: red;">2019/03/27 09:00</span>结束于<span style="color: red;">2019/03/30 9:00</span>
            委托编号:<span style="color:#8ED6FF;">WT201903261245</span></p>
          <p>
            2.本轮竞拍开始时间:<span style="color: red;">2019/04/02 09:00</span>结束于<span style="color: red;">2019/03/30 9:00</span>
            期间拍品在平台浏览量<span style="color: red;">365</span>次,共<span style="color: red;">45</span>个采购企业报名,
            经过平台审核筛选最终入选<span style="color: red;">25</span>位优质企业参加;竞拍编号:
            <span style="color:#8ED6FF;">JP201903261245</span>
          </p>
          <p>
            委托保留价<span style="color: red;">24561</span>元,起拍价<span style="color: red;">21561</span>元,共出价<span style="color: red;">151</span>次,加价幅度
            <span style="color: red;">1000</span>元,成交价<span style="color: red;">31561</span>,对比保留价溢出<span style="color: red;">7000</span>元
          </p>
          <p>
            <span style="color: red;">报告:ID45671 胜出方:江苏中泰机械加工有限公司,出价:4次,锁定成交价:31561,</span>
            订单编号:<span style="color:#8ED6FF;">D201904037654</span>
          </p>
          <el-table
            border
            :data="tableData"
            :header-cell-style="{'text-align':'center',background:'#F2F2F2'}"
            :cell-style="{'text-align':'center'}"
            style="width: 96%;border: 1px solid black;">
            <el-table-column
              prop="date"
              label="服务类型"
              width="200">
            </el-table-column>
            <el-table-column
              prop="name"
              label="代理人"
              width="150">
            </el-table-column>
            <el-table-column
              prop="province"
              label="服务时间"
              width="200">
            </el-table-column>
            <el-table-column
              prop="city"
              label="服务内容"
              width="200">
            </el-table-column>
            <el-table-column
              prop="address"
              label="备注"
              width="279">
            </el-table-column>
          </el-table>
          <p>
            本次服务总共为您服务时长<span style="color: red;">48</span>小时、参与服务类型<span style="color: red;">17</span>项,
            参与服务人员数量<span style="color: red;">2</span>人/次
          </p>
        </div>
      </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      innerVisible: false, // 点击报告弹窗
      a: false,
      b: true,
      currentPage4: 1, // 分页显示第几页
      pageRequest: { // 分页请求参数
        pageSize: 5, // 每页条数
        pageNum: 1 // 每页数量
      },
      total: 0, // 分页总条数
      tableData: [{ // table表格存储数据
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }]
    }
  },
  mounted () {
  },
  methods: {
    report () { // 点击报告颜色弹窗和内容
      this.innerVisible = true
    },
    handleClick (row) { // table表格中操作方法
      console.log(row)
    },
    handleSizeChange (val) { // 改变每页条数
      this.pageRequest.pageSize = val
    },
    handleCurrentChange (val) { // 改变当前页
      this.pageRequest.pageNum = val
    },
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>
<style lang="less" scoped>
  /deep/.el-menu-item.is-active {
    color: #FF6633;
    font-size: 24px;
    background-color: pink;
  }
  .two_my_bidding_content{
    margin-left: 10px;
    width: 99%;
  }
  .two_my_bidding_title{
    line-height: 100px;
    width: 100%;
    height: 100px;
  }
</style>
